<template>
	<el-image :src="image()" :style="getStyle()" :lazy="lazy"/>
</template>

<script>
	import {
		getVersion
	} from "../utils/version";
	export default {
		name: "MyImage",
		props: {
			type: {
				type: String,
			},
			icon: {
				type: String
			},
			size: {
				type: Number,
			},
			lazy: {
				type: Boolean,
			}
		},
		data() {
			return {
				baseUrl: "/api/static",
				sizes: [64, 100, 128, 256],
			}
		},
		methods: {
			image() {
				var i = 0;
				while (this.size > this.sizes[i]) i++;
				return this.baseUrl + "/" + this.type + "/" + getVersion() + "/" +
					this.sizes[i] + "/" + this.icon + '.png';
			},
			getStyle() {
				return "width: " + this.size + "px; height: " + this.size + "px;";
			},
		},
	}
</script>

<style>
</style>